<template>

    <div class="app-container">
      <div class="filter-container">
        <el-select v-model="queryPage.type" class="filter-item" placeholder="项目类型" style="width: 150px" clearable>
          <el-option v-for="item in xmTypes" :key="item.code" :label="item.name" :value="item.code" />
        </el-select>
        <el-input v-model="queryPage.name" class="filter-item" placeholder="项目名称" style="width: 150px" clearable />
  
        <el-button class="filter-item" icon="el-icon-search" type="primary" @click="search()">
          查询
        </el-button>
      </div>
  
      <el-table v-loading="listLoading" :data="data" :height="tableHeight2" style="width: 100%; overflow:auto" border>
        <el-table-column type="index" :index="indexMethod" header-align="center" align="center" label="序号" width="80px" />
        <el-table-column header-align="center" align="left" label="操作" width="100px" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="approval(scope)">审批</el-button>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="right" label="项目序号" width="150px">
          <template slot-scope="scope">
            <span>{{ scope.row.sortNum }}</span>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="left" label="项目类型" width="150px">
          <template slot-scope="scope">
            <span>{{ getDicName(scope.row.type,'CDS_XIANGMU_TYPE') }}</span>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="left" label="项目名称" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.xiangmumingcheng }}</span>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="left" label="是否展示api" width="120px">
          <template slot-scope="scope">
            <span>{{ getDicName(scope.row.ifzs,'CDS_YON') }}</span>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="left" label="状态" width="100px">
          <template slot-scope="scope">
            <span>{{ getDicName(scope.row.status,'CDS_YEWU_STATUS') }}</span>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="left" label="创建人" width="160px">
          <template slot-scope="scope">
            {{ scope.row.createuserName }}
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="right" label="创建时间" width="180px">
          <template slot-scope="scope">
            {{ scope.row.createtimeTi }}
          </template>
        </el-table-column>
      </el-table>
  
      <el-dialog :visible.sync="approvalVisible" append-to-body :show-close="false" width="800px" :title="'审批'" :close-on-click-modal="false">
        <approval v-if="approvalVisible" ref="approval" :proid="code" :visible.sync="approvalVisible" />
      </el-dialog>
  
      <pagination v-show="total>-1" :total="total" :page.sync="queryPage.page" :limit.sync="queryPage.limit" @pagination="loadList" />
    </div>
  </template>
  
  <script>
  import { getList, getInfoByOrderId } from '@/api/projectInfo'
  import { todoList as getList2 } from '@/api/snakerflow'
  import { getDictListByCode } from '@/api/dict'
  import { tableHeight2 } from '@/utils/tableHeight'
  import Pagination from '@/components/Pagination'
  
  import approval from '../backlog/approval' // eslint-disable-line no-unused-vars
  
  export default {
    components: { Pagination, approval },
    mixins: [tableHeight2],
    provide() {
      return {
        // getList: this.loadList,
        getList2: this.loadList
      }
    },
    data() {
      return {
        listLoading: false,
        queryPage: {
          page: 1,
          limit: 10
        },
        total: 0,
        code: '',
        data: [],
        approvalVisible: false,
        ywTypes: [],
        xmTypes: [],
        ynTypes: []
      }
    },
    created() {
      this.getDictList('CDS_XIANGMU_TYPE')
      this.getDictList('CDS_YEWU_STATUS')
      this.getDictList('CDS_YON')
      this.loadList()
    },
    methods: {
      indexMethod(index) {
        return (index + 1) + (this.queryPage.page - 1) * this.queryPage.limit
      },
      getDictList(code) {
        getDictListByCode(code).then(response => {
          if (code === 'CDS_XIANGMU_TYPE') {
            this.xmTypes = response.data
          }
          if (code === 'CDS_YEWU_STATUS') {
            this.ywTypes = response.data
          }
          if (code === 'CDS_YON') {
            this.ynTypes = response.data
          }
        })
      },
      getDicName(code, flag) {
        var dict = null
        if (flag === 'CDS_XIANGMU_TYPE') {
          dict = this.xmTypes
        } else if (flag === 'CDS_YEWU_STATUS') {
          dict = this.ywTypes
        } else if (flag === 'CDS_YON') {
          dict = this.ynTypes
        }
        for (var i in dict) {
          if (dict[i].code === code) {
            return dict[i].name
          }
        }
      },
      search() { // 查询
        this.loadList()
      },
      loadList() { // 加载列表
        this.data = []
        this.listLoading = true
        this.queryPage.status = '2'
  
        getList2(this.queryPage).then(response => {
          const { data } = response
  
          this.data = data.records
          this.total = parseInt(data.total)
          this.listLoading = false
        }).catch(response => {
          this.listLoading = false
        })
      },
      approval(scope) {
        this.approvalVisible = true
        this.code = scope.row.id
        this.$nextTick(() => {
          this.$refs.approval
          this.$refs.approval.getDetailed()
        })
      }
    }
  }
  </script>
  
  <style lang="less" scoped>
  .app-container{
    padding:10px 20px;
  }
  .filter-container {
    padding-bottom: 10px;
  
    .filter-item {
      display: inline-block;
      vertical-align: middle;
      margin-bottom: 10px;
      margin-right: 10px;
    }
    .date-filter-item{
      vertical-align: middle;
      margin-bottom: 10px;
      margin-right: 10px;
    }
  }
  .pagination-container {
    margin-top: 0 !important;
    padding: 10px 16px !important;
  }
  </style>
  